<template>
	<view>
		<b-navigator :active-index="activeIndex"></b-navigator>
		<b-header></b-header>
		
		
		<!-- 主体部分 -->
		<view class="main">
			<view class="product-detail-wrap">
				<view class="product-detail" v-if="detail.type === '1'">
					  <text class="page-title">全景图展示</text>
					  <view class="demo-vr">
						 <iframe :src="detail.viewUrl" frameborder='0' srolling='0' class="vr-view" @load="iframeLoaded"></iframe>
					  </view>
					
				
				</view>
				
				<view class="product-tab-wrap">
				
					  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
					    <el-tab-pane label="服务组织介绍" name="first" class="tab-content">
							<view v-html="detail.content"></view>
						</el-tab-pane>
					    <el-tab-pane label="机构设施设备" name="second" class="tab-content">
							<view>{{detail.remark}}</view>
							</el-tab-pane>
					    <el-tab-pane label="交通位置" name="third" class="tab-content">
							<view>
								<div id="container"></div>
							</view>
							
						</el-tab-pane>
					  </el-tabs>
					
				
				</view>
			</view>
		</view>
		
		<b-footer></b-footer>
		
	</view>
</template>

<script>
	import bNavigator from '../../components/b-navigator.vue'
	import bHeader from '../../components/b-header.vue'
	import bFooter from '../../components/b-footer.vue'
	import { organDetail } from '../../config/api'
	import AMapLoader from '@amap/amap-jsapi-loader';

	export default {
		components: { bNavigator, bFooter, bHeader },
	
		
		data() {
			return {
				activeIndex: '/pages/organ/index',
				activeName: 'first',
				detail: {},
				map: null
				
			}
		},
		onLoad() {
			this.getOrganDetail()
		},
	
		methods: {
			iframeLoaded(event) {
				const iframe = this.$refs.iframeRef;
			
				iframe.addEventListener('message', (event) => {
				console.log('Iframe mouse click event:', event);
				})
				
				        
	
			},
			getOrganDetail() {
				organDetail(this.$route.query.id).then(res => {
					this.detail = res.data
					this.detail.content = this.detail.content
						.replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/gi, '<p')
						.replace(/<p>/gi, '<p style="font-size: 15px; line-height: 25px;">')
						.replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/gi, '<img$1')
						.replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/gi, '<img$1')
						.replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/gi, '<img$1')
						.replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/gi, '<img$1')
						.replace(/<img([\s\w"-=\/\.:;]+)/gi, '<img style="max-width: 100%;" $1');
						this.detail.content = this.imageUrlHander(this.detail.content)	
				})
			},
			imageUrlHander(content){
				//富文本内容（后台返回图片路径不正确）
			      var reg = /<img [^>]*src=['"]([^'"]+)[^>]*>/g; //img 标签取src里面内容的正则
			      var srcArr = content.match(reg);//取到所有img标签放到数组中
			      if(srcArr !== null && srcArr.length){
			          for (let i = 0; i < srcArr.length; i++) {
			          var srcImg = srcArr[i].replace(reg, '$1');
					  var http = srcImg.slice(0,4)
			          var url = srcImg.slice(1);
			          var newImg = srcArr[i].replace(srcImg, 'http://localhost:81/' + url);
			          content = http === 'http'? content: content.replace(srcArr[i],newImg);
			          }        
			       }
			       // console.log(content)
			       return content;
			  },
			handleClick(tab, event) {
				if(tab.paneName === 'third') {
					this.initAMap();
				} else {
					return
				}
			},
			initAMap() {
				const _this = this
			  window._AMapSecurityConfig = {
			    securityJsCode: "2750a7d516abf30b6f7d4acf4f0caa2c",
			  };
			  AMapLoader.load({
			    key: "f7aa84df1f3891938473e61f093f4799", // 申请好的Web端开发者Key，首次调用 load 时必填
			    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
			     plugins: ["AMap.Scale", 'AMap.Geocoder', 'AMap.Marker','AMap.CitySearch'] //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
			  })
			    .then((AMap) => {
			      _this.map = new AMap.Map("container", {
			        // 设置地图容器id
			        viewMode: "3D", // 是否为3D地图模式
			        zoom: 15, // 初始化地图级别
			        center: [_this.detail.lon, _this.detail.lat], // 初始化地图中心点位置
			      });
				      // // 根据定位显示当前城市
				      //     AMap.plugin('AMap.CitySearch', function () {
				      //       var citySearch = new AMap.CitySearch()
				      //       citySearch.getLocalCity(function (status, result) {
				      //         if (status === 'complete' && result.info === 'OK') {
				      //           // 查询成功，result即为当前所在城市信息
				      //           var cityinfo = result.city;
				      //           var citybounds = result.bounds;
				      //           //地图显示当前城市
				      //           this.map.setBounds(citybounds);
				      //         }
				      //       })
				      //     })
						  
						   const marker = new AMap.Marker({
						              position: [_this.detail.lon, _this.detail.lat],
						            });
						            //将创建的点标记添加到已有的地图实例：
						            _this.map.add(marker)
						
							marker.on('click', function (ev) {
								uni.openLocation({
									latitude: Number(ev.lnglat.lat),
									longitude: Number(ev.lnglat.lng),
									address: _this.detail.address,
								})
							})
			    })
			    .catch((e) => {
			      console.log(e);
			    });
			}
			
		}
	}
</script>

<style>
	#container{
	      padding:0px;
	      margin: 0px;
	      width: 100%;
	      height: 300px;
	  }
	  .demo-vr {
		  position:sticky;
	  }
	  .vr-view {
		  width: 100%;
		  height: 600px;
		  
	  }
.product-detail-wrap {
	font-size: 16px;
	border-radius: 4px;
	padding: 15px;
	width: 100%;
	color: #262626;
	background-color: #ffffff;
	box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);

	.product-detail {
		width: 100%;
		display: grid;
	
		margin-bottom: 20px;


		.page-title {
		  width: 100%;
		  position: relative;
		  margin-bottom: 15px;
		  padding-bottom: 5px;
		  line-height: 28px;
		  border-bottom: 1px solid #ea6101;
		  color: #ea6101;
		  font-size: 16px;
		  text-align: left;
		  font-weight: bold;
		}
	}

	.product-tab-wrap {
	 position: relative;
		.tab-content {
			width: 100%;
			height: auto;
			overflow: auto;
		}
	}
}

@media screen and (max-width: 960px) {
	.main {
		flex-direction: column;
	}
	#container{
	      padding:0px;
	      margin: 0px;
	      width: 95%;
	      height: 300px;
	  }
	  .vr-view {
	  		  width: 90%;
	  		  height: 380px;
	  }

	.product-detail-wrap {
		width: 98%;
		.product-detail {
			flex-direction: column;

			.page-title {
			  width: 98%;
			  position: relative;
			  margin-bottom: 15px;
			  padding-bottom: 5px;
			  line-height: 28px;
			  border-bottom: 1px solid #ea6101;
			  color: #ea6101;
			  font-size: 16px;
			  text-align: left;
			  font-weight: bold;
			}

			
		}

		.product-tab-wrap {
			font-size: 28rpx;
			.tab-content {
				width: 100%;
				height: 300rpx;
				overflow: auto;
			}
		}
	}
}
</style>
<style scoped>
	
	::v-deep .el-tabs__item.is-active {
	  color: #ea6101;
	  opacity: 1;
	}
	 
	::v-deep .el-tabs__item:hover {
	  color: #ea6101;
	  cursor: pointer;
	  opacity: 1;
	  }
	  
	  /* 下划线颜色 */
	  ::v-deep .el-tabs__active-bar {
	    background-color: #ea6101;
		}

</style>
